<template>
	<view class="news-detail-container">
		<!-- 顶部导航栏 -->
		<view class="top-nav" :style="{ top: safeDistance + 'px' }">
			<view class="back-button" @click="handleGoBack">
				<text class="back-icon">←</text>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<scroll-view class="content-scroll" scroll-y>
			<!-- 新闻图片 -->
			<view class="news-image-wrapper">
				<image 
					class="news-image-large" 
					:src="newsDetail.image" 
					mode="aspectFill"
					@error="handleImageError"
				/>
				<view class="news-badge-overlay" :class="'badge-' + newsDetail.type">
					<text class="badge-text">{{ getNewsTypeText(newsDetail.type) }}</text>
				</view>
			</view>

			<!-- 新闻标题和元信息 -->
			<view class="news-header">
				<text class="news-title-large">{{ newsDetail.title }}</text>
				<view class="news-meta-large">
					<text class="news-time-large">{{ newsDetail.time }}</text>
					<text class="news-source-large">{{ newsDetail.source }}</text>
					<text class="news-views">阅读 {{ newsDetail.views }}</text>
				</view>
			</view>

			<!-- 新闻摘要 -->
			<view class="content-section">
				<text class="section-title">摘要</text>
				<text class="section-content">{{ newsDetail.summary }}</text>
			</view>

			<!-- 新闻内容 -->
			<view class="content-section">
				<text class="section-title">详细内容</text>
				<text class="section-content story-content">{{ newsDetail.content }}</text>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, computed } from 'vue';
	import { getNewsById } from '@/data/news';
	import type { News } from '@/types/news';

	const newsDetail = ref<News>({
		id: 0,
		title: '',
		summary: '',
		content: '',
		image: '',
		type: '',
		time: '',
		source: '',
		views: 0
	});

	// 安全距离（顶部内边距 = 安全区域 + 基础间距）
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		return safeAreaTop + 20;
	});

	onLoad((options: any) => {
		const id = parseInt(options.id || '1');
		const foundNews = getNewsById(id);

		if (foundNews) {
			newsDetail.value = foundNews;
		} else {
			uni.showToast({
				title: '未找到该动态信息',
				icon: 'none',
				duration: 2000
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 2000);
		}
	});

	const handleGoBack = () => {
		uni.navigateBack();
	};

	// 获取新闻类型文本
	const getNewsTypeText = (type: string): string => {
		const typeMap: Record<string, string> = {
			'awakening': '觉醒事件',
			'ability': '能力发现',
			'news': '新闻动态',
			'research': '研究进展'
		};
		return typeMap[type] || '动态';
	};

	// 图片加载错误处理
	const handleImageError = (e: any) => {
		console.log('图片加载失败:', e);
	};
</script>

<style lang="scss" scoped>
	.news-detail-container {
		min-height: 100vh;
		background: linear-gradient(180deg, #f5f7fa 0%, #e9ecef 100%);
		position: relative;
	}

	/**
	 * 顶部导航栏
	 */
	.top-nav {
		position: absolute;
		left: 24rpx;
		z-index: 10;
		box-sizing: border-box;
	}

	.back-button {
		width: 72rpx;
		height: 72rpx;
		background: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		transition: all 0.3s ease;
	}

	.back-button:active {
		transform: scale(0.95);
	}

	.back-icon {
		font-size: 40rpx;
		color: #1a202c;
		font-weight: 700;
	}

	/**
	 * 新闻图片
	 */
	.news-image-wrapper {
		width: 100%;
		height: 480rpx;
		position: relative;
		overflow: hidden;
	}

	.news-image-large {
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.news-badge-overlay {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
		padding: 12rpx 24rpx;
		border-radius: 20rpx;
		backdrop-filter: blur(10rpx);
		border: 2rpx solid rgba(255, 255, 255, 0.3);
	}

	.badge-awakening {
		background: rgba(245, 158, 11, 0.8);
	}

	.badge-ability {
		background: rgba(59, 130, 246, 0.8);
	}

	.badge-news {
		background: rgba(139, 92, 246, 0.8);
	}

	.badge-research {
		background: rgba(16, 185, 129, 0.8);
	}

	.badge-text {
		font-size: 24rpx;
		color: white;
		font-weight: 700;
	}

	/**
	 * 新闻头部信息
	 */
	.news-header {
		background: white;
		padding: 32rpx;
		margin: 24rpx 24rpx 0;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	.news-title-large {
		font-size: 44rpx;
		font-weight: 900;
		color: #1a202c;
		line-height: 1.4;
		display: block;
		margin-bottom: 24rpx;
	}

	.news-meta-large {
		display: flex;
		align-items: center;
		gap: 24rpx;
		padding-top: 24rpx;
		border-top: 2rpx solid #f1f5f9;
		flex-wrap: wrap;
	}

	.news-time-large {
		font-size: 24rpx;
		color: #64748b;
		font-weight: 500;
	}

	.news-source-large {
		font-size: 24rpx;
		color: #667eea;
		font-weight: 600;
	}

	.news-views {
		font-size: 24rpx;
		color: #94a3b8;
		font-weight: 500;
	}

	/**
	 * 内容区域
	 */
	.content-scroll {
		height: calc(100vh - 600rpx);
		width: 100%;
		box-sizing: border-box;
	}

	.content-section {
		background: white;
		margin: 24rpx 24rpx 0;
		padding: 32rpx;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	.section-title {
		font-size: 36rpx;
		font-weight: 800;
		color: #1a202c;
		display: block;
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 3rpx solid #667eea;
	}

	.section-content {
		font-size: 28rpx;
		color: #475569;
		line-height: 1.8;
		display: block;
	}

	.story-content {
		text-align: justify;
		text-indent: 2em;
	}

	/**
	 * 底部占位
	 */
	.bottom-placeholder {
		height: 120rpx;
	}
</style>

